<template>
	<view>
		<view class="hot-list">
			<view class="hot-item" v-for="(h, i) in ItemList" :key="h.id">
				<view class="hot-top" @click="naviTo(h.id)">
					<view class="top-title">
						{{h.title}}
					</view>
					<view class="top-right">
						全部>
					</view>
				</view>
				<view class="hot-main">
					<view class="main-image">
						<image :src="h.img_url" mode="widthFix"></image>
					</view>
					<view class="main-rank">
						<text v-for="(c, i) in h.contents" :key="c.id">{{i + 1}}. {{c.title}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		http
	} from '../../untils/http.js'
	
	const url = 'find/rank'
	
	export default {
		name:"HotList",
		data() {
			return {
				ItemList: []
			};
		},
		created() {
			http(url).then(res => {
				this.ItemList = res.data
				console.log(this.ItemList);
			})
		},
		methods: {
			naviTo(id) {
				uni.navigateTo({
					url: '/pages/RankDetails/RankDetails?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss">
	* {
		box-sizing: border-box;
	}
	
	.hot-list {
		margin: 5px 10px;
	}
	
	.hot-item {
		margin-bottom: 20px;
	}
	
	.hot-top {
		margin-bottom: 10px;
		display: flex;
		justify-content: space-between;
		
		.top-title {
			font-size: 14px;
			font-weight: 700;
		}
		
		.top-right {
			font-size: 14px;
			color: #b0b0b0;
		}
	}
	
	.hot-main {
		display: flex;
		
		.main-image {
			margin-right: 10px;
			flex: 2;
			overflow: hidden;
			
			image {
				width: 100%;
				height: 100%;
				border-radius: 10px;
			}
		}
		
		.main-rank {
			flex: 8;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			
			text {
				// margin-bottom: 10px;
				display: block;
				font-size: 12px;
				color: #9c9c9c;
			}
		}
	}
</style>